<template>
  <div>
    <div v-if="ifSetText" class="div-pop">
      <div class="bg-color-white pad-10 border-radius-5 width-per-90">
        <div class="mar-l-30">
          <div class="flex mar-b-10">
            <div class="flex-item">
              <div @click="openTool('toolSize')">{{ getSizeText }}</div>
              <div v-if="toolSize" class="tool-size border-all box-shadow border-radius-5 pad-10">
                <div @click="setStyle('toolSize', 'big-title')" class="big-title pad-b-10 flex">
                  <div class="flex-item">大标题</div>
                  <div v-if="getSizeText === '大标题'">
                    <icon type="success" size="18"/>
                  </div>
                </div>
                <div @click="setStyle('toolSize', 'small-title')" class="small-title pad-b-10 flex">
                  <div class="flex-item">小标题</div>
                  <div v-if="getSizeText === '小标题'">
                    <icon type="success" size="18"/>
                  </div>
                </div>
                <div @click="setStyle('toolSize', 'main-text')" class="main-text pad-b-10 flex">
                  <div class="flex-item">正文</div>
                  <div v-if="getSizeText === '正文'">
                    <icon type="success" size="18"/>
                  </div>
                </div>
                <div @click="setStyle('toolSize', 'other-text')" class="other-text flex">
                  <div class="flex-item">其它</div>
                  <div v-if="getSizeText === '其它'">
                    <icon type="success" size="18"/>
                  </div>
                </div>
              </div>
            </div>
            <div class="flex-item">
              <div @click="openTool('toolShape')">
                <icon class="iconfont icon-wenzi1 font-20 font-gray"></icon>
              </div>
              <div v-if="toolShape" class="tool-shape flex border-all box-shadow border-radius-5 pad-10">
                <div class="flex-item align-c" @click="setStyle('toolShape', 'font-w')">
                  <icon :class="shapeStyleSel1 ? 'font-orange' : ''" class="iconfont icon-B font-25"></icon>
                </div>
                <div class="flex-item align-c" @click="setStyle('toolShape', 'font-italic')">
                  <icon :class="shapeStyleSel2 ? 'font-orange' : ''" class="iconfont icon-xieti font-25"></icon>
                </div>
                <div class="flex-item align-c" @click="setStyle('toolShape', 'font-under')">
                  <icon :class="shapeStyleSel3 ? 'font-orange' : ''" class="iconfont icon-Underline font-25"></icon>
                </div>
              </div>
            </div>
            <div class="flex-item">
              <div @click="openTool('toolAlign')">
                <icon class="iconfont icon-liangduanduiqi font-20 font-gray"></icon>
              </div>
              <div v-if="toolAlign" class="tool-align flex border-all box-shadow border-radius-5 pad-10">
                <div class="flex-item align-c" @click="setStyle('toolAlign', 'text-align-l')">
                  <icon :class="nodeStyle.alignStyle === 'text-align-l' ? 'font-orange' : ''"
                        class="iconfont icon-fuhao-zuoduiqi font-25"></icon>
                </div>
                <div class="flex-item align-c" @click="setStyle('toolAlign', 'text-align-c')">
                  <icon :class="nodeStyle.alignStyle === 'text-align-c' ? 'font-orange' : ''"
                        class="iconfont icon-fuhao-juzhongduiqi font-25"></icon>
                </div>
                <div class="flex-item align-c" @click="setStyle('toolAlign', 'text-align-r')">
                  <icon :class="nodeStyle.alignStyle === 'text-align-r' ? 'font-orange' : ''"
                        class="iconfont icon-fuhao-youduiqi font-25"></icon>
                </div>
              </div>
            </div>
            <div class="flex-item">
              <div @click="openTool('toolColor')">
                <icon class="iconfont icon-yuan font-20" :class="nodeStyle.colorStyle"></icon>
              </div>
              <div v-if="toolColor" class="tool-color flex border-all box-shadow border-radius-5 pad-10">
                <div class="flex-item align-c" @click="setStyle('toolColor', 'font-color')">
                  <icon class="iconfont icon-yuan font-25 font-color"></icon>
                </div>
                <div class="flex-item align-c" @click="setStyle('toolColor', 'font-gray')">
                  <icon class="iconfont icon-yuan font-25 font-gray"></icon>
                </div>
                <div class="flex-item align-c" @click="setStyle('toolColor', 'font-red')">
                  <icon class="iconfont icon-yuan font-25 font-red"></icon>
                </div>
                <div class="flex-item align-c" @click="setStyle('toolColor', 'font-orange')">
                  <icon class="iconfont icon-yuan font-25 font-orange"></icon>
                </div>
                <div class="flex-item align-c" @click="setStyle('toolColor', 'font-green')">
                  <icon class="iconfont icon-yuan font-25 font-green"></icon>
                </div>
              </div>
            </div>
            <div class="flex-item">
              <div>
                <icon class="iconfont icon-yulan font-20" :class="isPreview ? 'font-orange' : 'font-gray' "
                      @click="openTool(); isPreview=!isPreview"></icon>
              </div>
            </div>
          </div>
        </div>
        <div class="border-all pad-10 node" @click="openTool(); isPreview=false">
          <div v-if="isPreview && nodeText" class="font-gray align-c">预览效果</div>
          <div v-if="isPreview" :class="getNodeStyle">
            <text space="nbsp">{{ nodeText }}</text>
          </div>
          <div :class="getNodeStyle">
            <textarea v-if="!isPreview" class="width-per-100" v-model="nodeText" fixed="true"
                      cursor-spacing="150" maxlength="-1" placeholder="请输入内容"/>
          </div>
        </div>
        <div class="align-c">
          <div class="flex mar-t-10">
            <button size="mini" class="mini-btn mar-r-20" @click="saveText">确定</button>
            <button size="mini" class="mini-btn mar-l-20" @click="ifSetText = false">取消</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        isComponents: true,
        ifSetText: false,
        index: 0,
        actionType: 0,
        nodeText: '',
        nodeStyle: {
          sizeStyle: '',
          shapeStyle: '',
          alignStyle: '',
          colorStyle: ''
        },
        toolSize: false,
        toolShape: false,
        toolAlign: false,
        toolColor: false,
        isPreview: false
      }
    },
    computed: {
      // 组装node
      getNode() {
        const node = {
          type: 'text',
          text: this.nodeText ? this.nodeText : ' ',
          style: this.nodeStyle,
          selModule: false
        }
        return node
      },
      // template里只能用computed计算值
      getNodeStyle() {
        let _style = ''
        _style += this.getNode.style.sizeStyle + ' '
        _style += this.getNode.style.shapeStyle + ' '
        _style += this.getNode.style.alignStyle + ' '
        _style += this.getNode.style.colorStyle + ' '
        return _style
      },
      getSizeText() {
        let sizeText = ''
        switch (this.nodeStyle.sizeStyle) {
          case 'big-title':
            sizeText = '大标题'
            break
          case 'small-title':
            sizeText = '小标题'
            break
          case 'other-text':
            sizeText = '其它'
            break
          default:
            sizeText = '正文'
        }
        return sizeText
      },
      // mpvue 不支持 computed 传参数，只能这样写
      shapeStyleSel1() {
        return this.nodeStyle.shapeStyle.indexOf('font-w') >= 0
      },
      shapeStyleSel2() {
        return this.nodeStyle.shapeStyle.indexOf('font-italic') >= 0
      },
      shapeStyleSel3() {
        return this.nodeStyle.shapeStyle.indexOf('font-under') >= 0
      }
    },
    methods: {
      // 设置文本内容
      setText(index, actionType, node) {
        // 初始化data
        Object.assign(this.$data, this.$options.data())
        this.ifSetText = true
        this.index = index
        this.actionType = actionType
        this.nodeText = ''
        if (actionType === 1) {
          this.nodeText = node.text
          if (node.style.shapeStyle !== undefined) {
            // 使用深拷贝，防止污染
            this.nodeStyle = this.$utils.deepClone(node.style)
          }
        }
      },
      // 保存文本内容
      saveText() {
        this.ifSetText = false
        // 对象需要深拷贝，防止污染
        this.$emit('saveContent', this.$utils.deepClone(this.getNode), this.index, this.actionType)
      },
      // 设置样式
      setStyle(type, styleName) {
        if (type === 'toolSize') {
          this.nodeStyle.sizeStyle = styleName
        }
        if (type === 'toolShape') {
          // 判断是否存在
          if (this.nodeStyle.shapeStyle.indexOf(styleName) >= 0) {
            this.nodeStyle.shapeStyle = this.nodeStyle.shapeStyle.replace(styleName, '')
          } else {
            this.nodeStyle.shapeStyle += styleName + ' '
          }
        }
        if (type === 'toolAlign') {
          this.nodeStyle.alignStyle = styleName
        }
        if (type === 'toolColor') {
          this.nodeStyle.colorStyle = styleName
        }
      },
      openTool(type) {
        if (type) this.isPreview = true
        this.toolSize = type === 'toolSize' ? !this.toolSize : false
        this.toolShape = type === 'toolShape' ? !this.toolShape : false
        this.toolAlign = type === 'toolAlign' ? !this.toolAlign : false
        this.toolColor = type === 'toolColor' ? !this.toolColor : false
      }
    }
  }
</script>

<style scoped>
  .node {
    height: 150px;
    overflow: scroll;
  }

  .tool-size {
    width: 100px;
    position: absolute;
    margin-left: -40px;
    margin-top: -200px;
    background-color: #fff;
    z-index: 999;
  }

  .tool-shape {
    width: 150px;
    position: absolute;
    margin-left: -75px;
    margin-top: -79px;
    background-color: #fff;
    z-index: 999;
  }

  .tool-align {
    width: 150px;
    position: absolute;
    margin-left: -75px;
    margin-top: -79px;
    background-color: #fff;
    z-index: 999;
  }

  .tool-color {
    width: 180px;
    position: absolute;
    margin-left: -92px;
    margin-top: -79px;
    background-color: #fff;
    z-index: 999;
  }
</style>
